<!--  -->
<template>
<div>
  <mt-header fixed title="Lemon商城" style="font-size: large;" :style="{backgroundColor:this.top>=200?'rgb(27,174,174)':'white',color:this.top>=200?'white':'rgb(27,174,174)'}">
  <router-link to="/shopList" slot="left">
    <img class="anniu" src="../assets/img/setting.png" alt="">
  </router-link>
  <router-link to="/MyHome" slot="right" v-if="this.userInfo.isLogin">
    <img class="anniu" src="../assets/img/我的 (1).png">
  </router-link >
  <router-link to="/MyHome" slot="right" v-else class="login">
    登录
  </router-link >
</mt-header>
<div class="border">
  <!-- 轮播图 -->
  <mt-swipe :auto="4000" style="height:143px;" class="swpie">
    <mt-swipe-item><img src="../assets/img/banner-mate-x3.png" alt=""></mt-swipe-item>
    <mt-swipe-item><img src="../assets/img/banner-mate50.png" alt=""></mt-swipe-item>
    <mt-swipe-item><img src="../assets/img/banner-p60-pro-white.png" alt=""></mt-swipe-item>
  </mt-swipe>
  <!-- 导航条 -->
  <mt-navbar>
  <mt-tab-item id="1" >
    <div @click="err('敬请期待')">
      <img src="../assets/img/超市@2x.png" alt=""> 
      <p>柠檬超市</p>
    </div>
  </mt-tab-item>
  <mt-tab-item id="2">
    <div @click="err('敬请期待')">
      <img src="../assets/img/服饰@2x.png" alt=""> 
      <p>柠檬服饰</p>
    </div>
  </mt-tab-item>
  <mt-tab-item id="3">
    <div @click="err('敬请期待')">
      <img src="../assets/img/全球购@2x.png" alt=""> 
      <p>全球购</p>
    </div>
    </mt-tab-item>
  <mt-tab-item id="4">
    <div @click="err('敬请期待')">
      <img src="../assets/img/生鲜@2x.png" alt=""> 
      <p>柠檬生鲜</p>
    </div>
  </mt-tab-item>
  <mt-tab-item id="5">
    <div @click="err('敬请期待')">
      <img src="../assets/img/到家@2x.png" alt=""> 
      <p>柠檬到家</p>
    </div>
  </mt-tab-item>
</mt-navbar>
  <mt-navbar>
  <mt-tab-item id="6">
    <div @click="err('敬请期待')">
      <img src="../assets/img/充值@2x.png" alt=""> 
      <p>充值缴费</p>
    </div>
  </mt-tab-item>
  <mt-tab-item id="7">
    <div @click="err('敬请期待')">
      <img src="../assets/img/9.9@2x.png" alt=""> 
      <p>9.9元拼</p>
    </div>
  </mt-tab-item>
  <mt-tab-item id="8"> 
    <div @click="err('敬请期待')">
      <img src="../assets/img/领券@2x.png" alt=""> 
      <p>领券</p>
    </div>
  </mt-tab-item>
  <mt-tab-item id="9">
    <div @click="err('敬请期待')">
      <img src="../assets/img/省钱@2x.png" alt=""> 
      <p>省钱</p>
    </div>
  </mt-tab-item>
  <mt-tab-item id="0">
    <div @click="err('敬请期待')">
      <img src="../assets/img/全部@2x.png" alt=""> 
      <p>全部</p>
    </div>
  </mt-tab-item>
</mt-navbar>
<!-- 分区 -->
  <div class="NewShop">
    <p>新品上线</p>
  </div>
  <div class="shopping" >
      <div  v-for="item in this.product.NewProduct" :key="item.pid"  @click="getProdict(item.pid)">
        <img :src="require(`../assets/img/product/${item.ProductImg}`)" alt="">
        <p>{{ item.ProductName}}</p>
        <p>￥{{item.ProductPrice}}</p>
      </div>
 
  </div>
  <div class="NewShop">
    <p>热门商品</p>
  </div>
  <div class="shopping">
      <div  v-for="item in this.product.HotProduct" :key="item.pid"  @click="getProdict(item.pid)">
        <img :src="require(`../assets/img/product/${item.ProductImg}`)" alt="">
        <p>{{ item.ProductName}}</p>
        <p>￥{{item.ProductPrice}}</p>
      </div>
 
  </div>
  <div class="NewShop">
    <p>最新推荐</p>
  </div>
  <div class="shopping">
      <div  v-for="item in this.product.LatestProduct" :key="item.pid"  @click="getProdict(item.pid)">
        <img :src="require(`../assets/img/product/${item.ProductImg}`)" alt="">
        <p>{{ item.ProductName}}</p>
        <p>￥{{item.ProductPrice}}</p>
      </div>
 
  </div>
</div>

<Tabbar :selected="selected"></Tabbar>

</div>
</template>

<script>
import Tabbar from "../components/TabbarName.vue";
import { Toast } from 'mint-ui';
export default {
data() {
return {
  selected:"index",
  userInfo:{},
  product:{},
  top:""
}
},
//生命周期 - 创建完成（访问当前this实例）
created() {

},
//生命周期 - 挂载完成（访问DOM元素）
mounted() {
// 判断登录状态
let userInfo=JSON.parse(localStorage.getItem("userInfo")); //去除localStoreage中的登录状态
  // console.log(this.userInfo)
  if(userInfo==null){
    // 路由跳转到首页
  }else{
      if(userInfo.isLogin){
        this.userInfo=userInfo
      }
  }

  // 获取首页商品信息 
  this.GetProductTitle()
  //可以在这里面直接进行滚动条的获取
  window.addEventListener('scroll', this.handleScroll, true)

},
methods:{handleScroll() {
var top = Math.floor(document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset)
// console.log(top)
this.top=top
},
  handleChange(index){
    console.log(index)
  },
  timerGO(){
        this.$router.push({
          path:"/UserLogin"
        })
        this.err("未登录")
    },
    err(a){
          this.toastInstanse=Toast(a);
      },
    GetProductTitle(){
      var url= `/GetProductTitle`
      this.axios.get(url).then(res=>{
        console.log(res)
        this.product=res.data.result
        console.log(this.product)
      })
    },
    getProdict(pid){
      console.log(pid)
      this.$router.push({
        path:"/ProductDetail",
        query : { 
          pid:pid
        }
      })
    }
},
components: {
    Tabbar
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
.mint-header{
    color: black;
    background-color: white;
    font-size: 10px;
} 
.mint-header .login{
  color:black;
  font-size: 14px;
  text-decoration: none
}
.anniu{
  width: 18px;
}
.border{
  margin-top: 40px;
  margin-bottom: 80px;
}
.border img{
  width: 100%;
  height: 100%;
}
.mint-navbar{
margin: 10px 0;  
}
.mint-navbar img{
  width: 30%;
  margin: 10px;
}
.mint-navbar p{
  font-size: 10px;
}
.NewShop{
  line-height: 50px;
  text-align: center;
  color: rgb(62, 190, 190);
  background-color:rgb(249, 249, 249);
}

.shopping{
  text-align: center;
  display: flex;
  flex-wrap: wrap;
}
.shopping>div{
  width: 42%;
  border: solid 2px rgb(249, 249, 249);
  padding: 10px;
}
.shopping>div>img{
  width: 70%;
  height: 70%;
  margin: 0 25px;
}
.shopping>div>p{
  font-size: 10px;
  /* 超出3行显示省略号 */
  display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 2;
 overflow: hidden;
 padding: 0 8px;
}
.shopping>div :last-child{
  color: rgb(27, 192, 26);
}
</style>